<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">   
    <%                
        List<Amazon.SimpleDB.Model.Attribute> itemAttributes = ViewData["ItemAttributes"] as List<Amazon.SimpleDB.Model.Attribute>;

        //
        // Hash our attributes to make them easier to access
        //        
        Dictionary<string, string> attributes = new Dictionary<string, string>();
        
        foreach (Amazon.SimpleDB.Model.Attribute attribute in itemAttributes)
        {
            //
            // Bids are MVA and will be treated separately
            //            
            if (attribute.Name.Equals("bids") == false)
            {
                attributes.Add(attribute.Name, attribute.Value);
            }           
        }                              
    %>
    <script type="text/javascript">
        var interval = 750;
        
        function secondsToString(seconds)
        {
            var numdays = Math.floor(seconds / 86400);
            var numhours = Math.floor((seconds % 86400) / 3600);
            var numminutes = Math.floor(((seconds % 86400) % 3600) / 60);
            var numseconds = ((seconds % 86400) % 3600) % 60;
    
            return numdays + ":" + numhours + ":" + numminutes + ":" + numseconds;
        }
        
        //
        // This timer updates the price constantly every 1/2 second
        //
        $(document).ready(function() { 
            setupTimers();
            setupEvents();
        });
        
        function setupTimers() {
            $.timer(interval, function(timer) {
                $.ajax({
                    type: "GET",
                    url: "/Auction/Price/<%=ViewData["ItemId"]%>",
                    success: function(data) {                        
                        $("#currentPrice").text(data);
                    }
                });
            });
                        
            $.timer(interval, function(timer) {
                $.ajax({
                    type: "GET",
                    url: "/Auction/Time/<%=ViewData["ItemId"]%>",
                    success: function(data) {                        
                        $("#currentTime").text(secondsToString(data));
                    }
                });
            });
                          
            $.timer(interval, function(timer) {
                $.ajax({
                    type: "GET",
                    url: "/Auction/Winner/<%=ViewData["ItemId"]%>",
                    success: function(data) {                        
                        $("#currentWinner").text(data);
                    }
                });
            });
            
             $.timer(interval, function(timer) {
                $.ajax({
                    type: "GET",
                    url: "/Auction/Bids/<%=ViewData["ItemId"]%>",
                    success: function(data) {
                        
                        bids = JSON.parse(data);          
                        
                        //
                        // Clear our list first
                        //                                          
                        $('#top10Bidders').html('');
                        $.each(bids, function() { $('#top10Bidders').append('<li>' + this + '</li>'); });                        
                    }
                });
            });
        }
                
        function setupEvents() {
            $("#bid").click(function() {
                $.ajax({
                    type: "GET",
                    url: "/Auction/Bid/<%=ViewData["ItemId"]%>",
                    success: function(data) { 
                        if (data == "True"){
                            $("#status").val("Your bid was placed successfully");
                        }
                        else{
                            $("#status").val("There was an error placing your bid");
                        }
                    }                                
                });
            });
            
            $("#recharge").click(function() {                
                $.ajax({
                    type: "GET",
                    url: "/Account/Recharge",
                    success: function(data) {                         
                        $("#status").text("Your account has been recharged!");
                    },
                    error: function(){
                        $("#status").val("There was an error recharging your account!");                        
                    }                                
                });
            });
        }        
    </script>
    <div>
        <div>
            <table>
                <tr>
                    <td></td>
                    <td><b>Current Price</b></td>
                    <td><b>Time Remaining</b></td>
                    <td><b>Current Winner</b></td>
                </tr>
                <tr>                    
                    <td valign="top">
                        <h2><%=attributes["name"]%></h2>
                        <img src="<%=attributes["image"] %>" alt="image"/>                                  
                    </td>
                    <td valign="top"><h1>$<span id="currentPrice"><img alt="loading" src="../../Content/ajax_loading.gif" /></span></h1></td>
                    <td valign="top"><h1><span id="currentTime"><img alt="loading" src="../../Content/ajax_loading.gif" /></span></h1></td>     
                    <td valign="top"><h1><span id="currentWinner"><img alt="loading" src="../../Content/ajax_loading.gif" /></span></h1></td>            
                </tr>                                     
            </table>                
            <div>     
                <h2>Top Bidders</h2>       
                <ul id="top10Bidders">
                    <img src="../../Content/ajax_loading.gif" alt="loading"/>
                </ul>
            </div>                                
        </div>
        <div>        
            <!-- only show this if the user is logged in -->
            <asp:LoginView ID="LoginView1" runat="server">
                <AnonymousTemplate>Please register/login to place bids</AnonymousTemplate>
                <LoggedInTemplate>
                    <div>                                  
                        <input id="bid" type="button" value="Place a bid"/>
                        <input id="recharge" type="button" value="Recharge your account" />
                        <i style="font-size:small">(<span id="numBids"><img alt="loading" src="../../Content/ajax_loading.gif" /></span> bids left)</i>
                        <script type="text/javascript">
                            $.timer(interval, function(timer) {
                                $.ajax({
                                    type: "GET",
                                    url: "/Auction/GetNumBids",
                                    success: function(data) {                                        
                                        $("#numBids").text(data);
                                    }
                                });
                            });            
                        </script>
                    </div>                                        
                </LoggedInTemplate>
            </asp:LoginView>                               
        </div>
        <div>
            <span id="status" />                
        </div>
    </div>
</asp:Content>
